<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="format-detection" content="telephone = no" />
		<meta name="format-detection" content="email = no" />
		<title>Document</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./CSS/style-1.css">
		<link rel="stylesheet" type="text/css" href="CSS/lbt.css"/>
		<script src="./JS/jquery-1.7.2.min.js"></script>
		<title>精选</title>
	</head>

	<body style="background-color: #eee;">
		<header>
			<div class="SD-header">
				精选
				<a href="" class="fa fa-search fr" aria-hidden="true"></a>
			</div>
		</header>
		<nav class="nav-SD">
			<ul class="list-inline">
				<li>女频</li>
				<li>男频</li>
				<li>出版</li>
				<li style="border: none;">免费</li>
			</ul>
		</nav>
		<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active" style="background:#223240;">
					<a href="#"><img src="img/lbt1.jpg" alt="第一张"></a>
				</div>
				<div class="item" style="background: #f1ddc5">
					<a href="#"><img src="img/lbt3.jpg" alt="第二张" style="height: 5.6rem"></a>
				</div>
				<div class="item">
					<a href="#"><img src="img/lbt2.jpg" alt="第三张" style="height: 5.6rem"></a>
				</div>
			</div>
			<a href="#myCarousel" data-slide="prev" class="carousel-control
left">&lsaquo;</a>
			<a href="#myCarousel" data-slide="next" class="carousel-control
right">&rsaquo;</a>
		</div>
		<!--轮播图结束-->
		<div class="private">
			<a href="#"><img src="img/private_03.gif" width="35" /></a>
			私人书坊
			<span class="private_sp">为你量身定制，打造专属服务</span>
			<a href="" class="fa fa-chevron-right pull-right" aria-hidden="true"></a>
		</div>
		<!--私人书坊：END-->
		<div class="Recommend">
			<ul>
				<li class="pull-left">重磅推荐</li>
				<li class="pull-right">
					<a href="" class="fa fa-chevron-right" aria-hidden="true"></a>
				</li>
			</ul>
			<div class="clearfix"></div>
			<div class="Rec_con">
				<ul>
					<li>
						<a href=""><img src="img/精选_03.gif" width="100" height="120" /></a>
					</li>
					<li>
						<a href=""><img src="img/精选_05.gif" width="100" height="120" /></a>
					</li>
					<li>
						<a href=""><img src="img/精选_03.gif" width="100" height="120" /></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="clearfix"></div>
		<footer>
			<ul>
				<li style="margin-left: 1.5rem;">
					<div class="Selected">
						<div class="Selected_1">
							<i class="fa fa-star" aria-hidden="true"></i>
						</div>
						<a href="#">精选</a>
					</div>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/书库.png" width="26" height="22" />
						</div>
						<a href="Bookstore.html">书库</a>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/书架.png" width="26" height="22" />
						</div>
						<a href="#">书架</a>
				</li>
				<li>
					<div class="Bookstore">
						<div class="Bookstore_1">
							<img src="img/我.png" width="26" height="22" />
						</div>
						<a href="center.html">我的</a>
				</li>

			</ul>
		</footer>
	</body>
	<script type="text/javascript">
		$(function() {
			$('#myCarousel').carousel({
				interval: 2000
			});
		});
		
	</script>

</html>